<template>
    <div class="problem">
        <div @click="fun()">
            <div class="q clearfix"><span>Q</span><p>你好？我想修复眼袋！我是2013年正月15做的现在眼下有皱纹！下踹！谢谢回复</p><span>18小时前</span></div>
            <div class="a clearfix"><span>A</span>
                <div class="text clearfix">
                    <div class="user-img">
                        <img src="../../assets/meirong1.jpg" alt="">
                    </div>
                    <div class="text-delist clearfix">
                        <h1>王晓敏医生</h1>
                        <p>你好，健丽医学美容集团成立23年。专家都是专注于眼部微整形，主打不开刀祛眼袋，是眼部领域做的非常好的。建议带图咨询，可以做个初步面诊</p>
                    </div>
                    <div class="zan clearfix">
                        <span>求助</span>
                        <span>鼻子整容</span>
                        <span>咨询价格</span>
                        <p><span><Icon type="ios-eye" class="icon" />关注(20)</span><span><Icon type="md-text" class="icon"/>解答(20)</span><span><Icon type="md-time" class="icon" />2018-02-18</span></p>
                    </div>
                </div>
            </div>
        </div>
        <div @click="fun()">
            <div class="q clearfix"><span>Q</span><p>你好？我想修复眼袋！我是2013年正月15做的现在眼下有皱纹！下踹！谢谢回复</p><span>18小时前</span></div>
            <div class="a clearfix"><span>A</span>
                <div class="text clearfix">
                    <div class="user-img">
                        <img src="../../assets/meirong1.jpg" alt="">
                    </div>
                    <div class="text-delist clearfix">
                        <h1>王晓敏医生</h1>
                        <p>你好，健丽医学美容集团成立23年。专家都是专注于眼部微整形，主打不开刀祛眼袋，是眼部领域做的非常好的。建议带图咨询，可以做个初步面诊</p>
                    </div>
                    <div class="zan clearfix">
                        <span>求助</span>
                        <span>鼻子整容</span>
                        <span>咨询价格</span>
                        <p><span><Icon type="ios-eye" class="icon" />关注(20)</span><span><Icon type="md-text" class="icon"/>解答(20)</span><span><Icon type="md-time" class="icon" />2018-02-18</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        props:['width'],
        methods:{
            fun () {
                this.$router.push({path:'/questiondelist'})
            }
        }
    }
</script>

<style scoped lang="less">
    .problem{
        >div{
            cursor: pointer;
        }
        .q{
            padding-top: 30px;
            padding-left: 10px;
            >:first-child{
                color: #fdbec6;
                font-size: 20px;
                float: left;
            }
            p{
                /*width: 65%;*/
                float: left;
                color: #333333;
                font-size: 16px;
                margin-left: 10px;
                padding-top: 3px;
                overflow: hidden;
            }

            >:last-child{
                color: #999999;
                font-size: 16px;
                float: left;
                margin-left: 2%;
            }
            >:last-child:before{
                display: block;
                content: '';
                width: 5px;
                height: 5px;
                border-radius: 50%;
                background-color: #b2b3b9;
                position: absolute;
                top: 14px;
                left: -18px;
            }
        }
        .a{
            padding-top: 15px;
            padding-left: 10px;
            border-bottom: 1px dashed #e7e7e7;
            padding-bottom: 20px;
            /*width: 90%;*/
            >:first-child{
                color: #b6d8fd;
                font-size: 20px;
                float: left;
                margin-top: 5px;
            }
            >.text{
              margin-left: 10px;
                .user-img{
                    width: 50px;
                    height: 50px;
                    float: left;
                    margin-left: 10px;
                    margin-top: 5px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .text-delist{
                    float: left;
                    margin-left: 10px;
                    h1{
                        color: #333333;
                        font-size: 14px;
                        padding-top: 5px;
                        padding-bottom: 10px;
                    }
                    p{
                        color: #666666;
                        font-size: 14px;
                        width: 675px;
                    }
                }
                .zan{
                    float: left;
                    padding-top: 30px;
                    padding-left: 70px;
                    width: 100%;
                     >span{
                         border: solid 1px #e0e0e0;
                         background-color: #f0f0f0;
                         border-radius: 13px;
                         padding: 5px 10px;
                         color: #666666;
                         font-size: 14px;
                         margin-right: 13px;

                     }
                     p{
                         width: 50%;
                         float: right;
                         text-align: right;
                         color: #999999;
                         font-size: 12px;
                         span{
                             margin-right: 20px;
                             .icon{
                                 font-size: 20px;
                                 margin-right: 8px;
                                 margin-top: -2px;
                             }
                         }
                    }
                }
            }

        }
    }
</style>